<template>
	<view style="height: 120upx;width: 100%;position: fixed;bottom: 0;background: #fff;box-shadow: 0 -0.5px 3px rgb(0 0 0 / 10%);">
		<view v-for="(item,index) in footerList" :key="index" class="nav">
			<view @click="handleChangeCurrentPage(item,index)" class="item">
				<!-- <text :class="[item.icon, current_ind === item.footer_ind ? 'current-page' : '']" ></text> -->
				<image class="price-right" :src="current_ind == item.footer_ind?item.icon2:item.icon" mode="aspectFit"></image>
				<p class="text" :style="current_ind == item.footer_ind ? 'color:#60A3DA' : 'color:#9B9B9B'">{{item.name}}</p>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
					current_ind: {
						type: Number,
						default: 1
					}
				},
		data() {
			return {
				defau:1,
				footerList: [
					{
						icon: '../../static/home.png',
						icon2: '../../static/home2.png',
						name: '首页',
						footer_ind: 1,
						page_route: '/pages/index/index'
					},
					{
						icon: '../../static/shop.png',
						icon2: '../../static/shop2.png',
						name: '商城',
						footer_ind: 2,
						page_route: '/pages/mall/shopping/shopping'
					},
					{
						icon: '../../static/video.png',
						icon2: '../../static/video2.png',
						name: '直播',
						footer_ind: 3,
						page_route: '/pages/course-list/course-list?media=live&goodstype=course'
					},
					{
						icon: '../../static/my.png',
						icon2: '../../static/my2.png',
						name: '我的',
						footer_ind: 4,
						page_route: '/pages/user/user'
					}
				]
			}
		},
		
		methods: {
			handleChangeCurrentPage(item,index) {
				// #ifdef MP
				this.footerList= [
					{
						icon: '../../static/home.png',
						icon2: '../../static/home2.png',
						name: '首页',
						footer_ind: 1,
						page_route: '/pages/index/index'
					},
					{
						icon: '../../static/shop.png',
						icon2: '../../static/shop2.png',
						name: '商城',
						footer_ind: 2,
						page_route: '/pages/mall/shopping/shopping'
					},
					{
						icon: '../../static/video.png',
						icon2: '../../static/video2.png',
						name: '直播',
						footer_ind: 3,
						page_route: '/pages/course-list/course-list?media=live&goodstype=course'
					},
					{
						icon: '../../static/my.png',
						icon2: '../../static/my2.png',
						name: '我的',
						footer_ind: 4,
						page_route: '/pages/user/user'
					}
				];
				// #endif
				// #ifdef H5
				if(index==1){
					this.footerList= [
						{
							icon: '../../../static/home.png',
							icon2: '../../../static/home2.png',
							name: '首页',
							footer_ind: 1,
							page_route: '/pages/index/index'
						},
						{
							icon: '../../../static/shop.png',
							icon2: '../../../static/shop2.png',
							name: '商城',
							footer_ind: 2,
							page_route: '/pages/mall/shopping/shopping'
						},
						{
							icon: '../../../static/video.png',
							icon2: '../../../static/video2.png',
							name: '直播',
							footer_ind: 3,
							page_route: '/pages/course-list/course-list?media=live&goodstype=course'
						},
						{
							icon: '../../../static/my.png',
							icon2: '../../../static/my2.png',
							name: '我的',
							footer_ind: 4,
							page_route: '/pages/user/user'
						}
					];
				}
				// #endif
				uni.redirectTo({
					url: item.page_route
				})
			}
		}
	}
</script>
<style>
	.current-page{
		color: #6487F8;
	}
	.nav{
		width: 25%;
		float: left;
		height: 60upx;
	}
	.item{
		width: 100%;
	}
	.price-right{
		width: 40upx;
		height: 40upx;
		margin-left: 40%;
		margin-top: 25upx;
	}
	.text{
		width: 100%;
		text-align: center;
		color: #9B9B9B;
		font-size: 12px;
	}
</style>